import React from 'react';
import './-page.scss';
import ColumnProjectDisplay from "components/data/column-project-display";
import {RouterList} from "@/routers/router-list";
import ColumnCanvassDisplay from "components/data/column-canvass-display";
import ColumnCapitalDisplay from "components/data/column-capital-display";
import ColumnEventDisplay from "components/data/column-event-display";
import {DateFormat} from "auxiliaries/extends/format";
import {Link} from "react-router-dom";
import {ColumnItemExpert} from "components/data/column-items";

class ColumnProjectDisplayUserState extends React.Component {

    render() {
        let {
            item = {}
        } = this.props;
        let {
            Id,
            ProjectState,
            ReviewState,
            To = RouterList.project.state(Id),
            ...childItems
        } = item;

        return (
            <div className={"--column-project-display-user-state"}>
                <ColumnProjectDisplay item={{
                    ...childItems,
                    To,
                    Id,
                }}/>
                <div className="--column-state font-size-30">
                    {ReviewState === 0 ? "审核中" : ReviewState === 1 ?
                        (ProjectState === 1 ? '已上架' : "已下架")
                        : "审核不通过"}
                </div>
            </div>
        );
    }
}

class ColumnCanvassDisplayUserState extends React.Component {
    render() {
        let {
            item = {}
        } = this.props;
        let {
            Id,
            ProjectState,
            ReviewState,
            To = RouterList.canvass.state(Id),
            ...childItems
        } = item;

        return (
            <div className={"--column-project-display-user-state"}>
                <ColumnCanvassDisplay item={{
                    To,
                    Id,
                    ...childItems
                }}/>
                <div className="--column-state font-size-30">
                    {ReviewState === 0 ? "审核中" : ReviewState === 1 ?
                        (ProjectState === 1 ? '已上架' : "已下架")
                        : "审核不通过"}
                </div>
            </div>
        );
    }
}

class ColumnCapitalDisplayUserState extends React.Component {
    render() {
        let {
            item = {}
        } = this.props;
        let {
            Id,
            To = RouterList.capital.state(Id),
            CapitalState,
            ReviewState,
            ...childItems
        } = item;

        return (
            <div className={"--column-capital-display-user-state"}>
                <ColumnCapitalDisplay item={{
                    ...childItems,
                    To,
                    Id
                }}/>
                <div className="--column-state font-size-30">
                    {ReviewState === 0 ? "审核中" : ReviewState === 1 ?
                        (CapitalState === 1 ? '已上架' : "已下架")
                        : "审核不通过"}
                </div>
            </div>
        );
    }
}

class ColumnEventDisplayUserState extends React.Component {
    render() {
        let {
            item = {}
        } = this.props;
        let {
            Id,
            ReviewState,
            ActivityState,
            ...childrenItems
        } = item;
        return (
            <div className={"--column-event-display-user-state"}>
                <ColumnEventDisplay item={{
                    Id,
                    ...childrenItems,
                    To: RouterList.event.state(Id)
                }}/>
                <div className="--column-state font-size-18">
                    {ReviewState === 0 ? "审核中" : ReviewState === 1 ?
                        (ActivityState === 1 ? '已上架' : "已下架")
                        : "审核不通过"}
                </div>
            </div>
        );
    }
}

//对应个人中心的预约报名中的活动栏目
class ColumnEventDisplayOrder extends React.Component {
    render() {
        let {item} = this.props;
        let {
            StartTime,
            EndTime,
            Invitation,
            OrderNo,
            IsCheckIn,
            OrderPrice,
        } = item || {};

        return (
            <div className={"--column-event-display-order"}>
                <div className="order-header flex-start">
                    <span className={"font-size-32"}>订单号：{OrderNo}</span>
                    <span className={"font-size-30"}>{IsCheckIn ? '已签到' : "未签到"}</span>
                </div>
                <ColumnEventDisplay isOrderPage={true} item={item} orderTimeChild={
                    <span className="time-range">
                        <span>{DateFormat(StartTime, 'm月d日')}-{DateFormat(EndTime, 'm月d日')}</span>
                        <span>{"9:00-17:00"}</span>
                    </span>
                }/>
                <div className="order-footer flex-start font-size-30">
                    <div>
                        <span>总计：</span>
                        <span className="count">&yen;{OrderPrice}</span>
                    </div>
                    <Link to={Invitation} className={"count"}>查看邀请函</Link>
                </div>
            </div>
        )
    }
}

class ColumnItemExpertUser extends React.Component {
    render() {
        let {
            item,
        } = this.props;
        let {
            ...childItem
        } = item || {};

        return (
            <div className="--column-item-expert-user">
                <ColumnItemExpert item={childItem}/>
            </div>
        )
    }
}

export {
    ColumnProjectDisplayUserState,
    ColumnCanvassDisplayUserState,
    ColumnCapitalDisplayUserState,
    ColumnEventDisplayUserState,

    //对应个人中心的预约报名中的活动栏目
    ColumnEventDisplayOrder,

    //对应个人中心的专家
    ColumnItemExpertUser,
};